<!-- <template>
	<view class="list">
		<view class="item">
			<view class="radio">
				<u-radio-group v-model="value">
					<u-radio shape="circle"></u-radio>
				</u-radio-group>
			</view>
			<view class="img">
				<u--image
					src="http://www.shop.net/uploads/attach/2023/02/20230213/small_5ae4f6a3f8bf153beb849e02e14b5c40.png"
					mode="aspectFit" width="170rpx" height="170rpx" radius="30rpx"></u--image>
			</view>
			<view class="right">
				<view class="top">
					<u--text text="我用十年青春,赴你最后之约" size="26rpx"></u--text>
					<u--text text="1.8m" size="24rpx" lineHeight="50rpx" color="#999"></u--text>
				</view>
				<view class="bottom">
					<u-row justify="space-between" customStyle="margin-bottom: 10px">
						<u-col span="3">
							<u--text text="￥399.00" size="26rpx" color="red"></u--text>
						</u-col>
						<u-col span="5">
							<u-number-box v-model="value" buttonSize="25"></u-number-box>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {} else {
				uni.navigateTo({
					url: '../login/login'
				});
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.item {
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: #fff;

		.radio {
			padding: 80rpx 10rpx;
		}

		.right {
			width: 100%;

			.item .right .bottom[data-v-0f00adf4] {
				display: flex;
				margin-top: 20rpx;
				color: red;
				display: flex;
			}
		}
	}
</style> -->


<template>
	<view class="wrapper">
		<view class="cart_num">
			<view>
				购物数量：
				<text style="color: #c55a5c;">{{cart_num}}</text>
			</view>
			<u-button type="info" size="small" :plain="true" :hairline="true" :text="!flag?'管理':'取消'"
				@click="flag=!flag"></u-button>
		</view>
		<view class="content" v-for="(item,index) in list" :key="item.id" @click="handleDetail(item.product_id)">
			<u-checkbox-group size="25" @change="checkChange">
				<u-checkbox shape="circle" activeColor="#c55a5c" :checked="item.attrStatus">
				</u-checkbox>
			</u-checkbox-group>
			<image :src="item.productInfo.image" mode=""></image>
			<view class="info">
				<view class="delete">
					<view class="">
						<p class="store_name">{{item.productInfo.store_name}}</p>
						<view style="color: #999;font-size: 24rpx;">属性：{{item.productInfo.attrInfo.suk}}</view>
					</view>
				</view>
				<view class="num_btn">
					<view style="margin-top: 57rpx;color: #c55a5c;">￥{{item.truePrice}}</view>
					<u-number-box :min="1" :max="100" buttonSize="40px" @change="handleNum(item.id,item.cart_num)"
						v-model="item.cart_num"></u-number-box>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="all_check">
				<!-- v-model="allChecked" -->
				<u-checkbox-group size="25" placement="column" @change="handleAllCheck" v-model="allChecked">
					<u-checkbox shape="circle" activeColor="#c55a5c" label="全选" :checked="allChecked">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="price" v-show="!flag">
				￥{{total_price}}
			</view>
			<view class="get_order" @click="handleOrder" v-show="!flag">
				下单
			</view>
			<view v-show="flag" class="delete">
				<u-button type="info" size="small" :plain="true" :hairline="true" text="收藏"></u-button>
				<u-button type="warning" size="small" :plain="true" :hairline="true" text="删除"
					@click="handleDelete"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { cart } from '@/api'
	export default {
		data() {
			return {
				checkboxValue1: [],
				flag: false,
				list: [],
				cart_num: '',
				pro_id: '',
				pro_index: '',
				cartId: ''
			}
		},
		methods: {
			// 单选
			checkChange(e) {
				console.log(e);
				// if (item.attrStatus == true) {
				// 	this.pro_id = item.id
				// 	this.pro_index = index
				// }
			},
			handleDetail(uid) {
				uni.navigateTo({
					url: `/pages/selection/detail/detail?uid=${uid}`
				});
			},
			// 控制全选
			checkboxChange(value) {
				if (value == 'check_all') {
					this.flag = true
				} else {
					this.flag = false
				}
			},
			// 删除
			async handleDelete() {
				let { status, msg, data } = await cart.cart_del({ ids: this.pro_id })
				if (status) {
					uni.showToast({
						title: msg,
						duration: 2000
					})
					this.list.splice(this.pro_index, 1)
					this.load_cart_num()
				}
			},
			// 购物车列表
			async load_cart_list() {
				let { status, data } = await cart.cart_list({ page: 1, limit: 20, status: 1 })
				if (status) {
					this.list = data.valid
				}
			},
			// 购物车数量
			async load_cart_num() {
				let { data, status } = await cart.cart_num({ numType: 0 })
				if (status) {
					this.cart_num = data.count
					this.cartId = data.ids.join(',')
				}
			},
			// 修改购物车数量
			async handleNum(id, cart_num) {
				let { msg, status, data } = await cart.product_num({ id, number: cart_num })
				if (status) {
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					})
					this.load_cart_num()
				}
			},
			handleAllCheck(e) {
				console.log(e);
			},
			// 下单
			handleOrder() {
				this.list.forEach((item) => {
					if (!item.attrStatus) {
						uni.showToast({
							title: '请选择商品',
							icon: 'none',
							duration: 2000
						})
						return;
					} else {
						uni.navigateTo({
							url: `/pages/user/order/confirm_order?cartId=${this.cartId}`
						});
					}
				})
			}
		},
		computed: {
			// 计算总价
			total_price() {
				return this.list.reduce((total, item) => {
					if (item.attrStatus) {
						return total + item.truePrice
					} else {
						return total
					}
				}, 0)
			},
			// 控制全选
			allChecked: {
				set(newValue) {
					// console.log(newValue);
					// 全选框的value决定了子元素复选框的value
					this.list.forEach((item) => { item.attrStatus = !item.attrStatus });
				},
				get() {
					if (this.list.length == 0) {
						return false;
					}
					return this.list.every((item) => item.attrStatus === true);
				},
			},
		},
		onLoad() {
			this.load_cart_list()
			this.load_cart_num()
		}
	}
</script>

<style lang="scss">
	.wrapper {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;

		.delete {
			display: flex;

			.u-button {
				margin-right: 30rpx;
			}
		}

		.cart_num {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			.u-button {
				width: 20%;
				position: absolute;
				right: 40rpx;
			}
		}

		.store_name {
			width: 400rpx;
			color: #666;
			font-size: 26rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.content {
			padding: 21rpx 21rpx 23rpx 24rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-left: 30rpx;
				margin-right: 24rpx;
			}

			.remove {
				color: gray;
				margin-left: 90rpx;
				font-size: 20rpx;
			}

			.delete {
				display: flex;
				align-content: space-between;
			}

			.num_btn {
				display: flex;
				justify-content: space-between;

			}
		}

		.likes {
			padding: 21rpx;
			background-color: #fff;

			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: 700;
				text-align: center;
			}

			.likes-con {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 200rpx;

				.like_store {
					margin-top: 40rpx;

					image {
						width: 344rpx;
						height: 350rpx;
					}

					.msg {
						margin-left: 10rpx;
						font-size: 26rpx;
					}
				}
			}

		}

		.order {
			position: fixed;
			width: 100%;
			height: 97rpx;
			bottom: 91rpx;
			left: 0;
			display: flex;
			border-top: 2px solid #ddd;
			justify-content: space-between;
			align-items: center;
			background-color: #fbfbfb;

			.price {
				font-style: 28rpx;
				color: #c55a5c;
				margin-right: 20px;
			}

			.all_check {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 31rpx 20rpx 30rpx 27rpx;
				flex-grow: 1;
			}

			.get_order {
				text-align: center;
				width: 225rpx;
				height: 100%;
				line-height: 97rpx;
				font-size: 28rpx;
				color: #fff;
				background-color: #c55a5c;
				cursor: pointer;
			}

		}

	}
</style>